<template>
  <common-card title="累计用户数" :value="numberFormater(userTotal)">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div class="footer">
        <span>日同比</span>&nbsp; <span class="emphasis">{{numberFormater(userGrowthLastDay)}}%</span>&nbsp;
        <span class="increment"></span>&nbsp;&nbsp;&nbsp;
        <span>月同比</span>&nbsp; <span class="emphasis">{{numberFormater(userGrowthLastMonth)}}%</span>&nbsp;
        <span class="decrement"></span>
      </div>
    </template>
  </common-card>
</template>
 
 <script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TotalUsers",
});
</script>
 <script lang="ts" setup>
import { ref, onMounted,computed,watch } from "vue";
import CommonCard from "./CommonCard.vue";
import * as echarts from "echarts";
import type { EChartsType } from "echarts";
import useFormater from "@/hooks/useFormater";
import {useReportDataStore} from '@/stores/reportData'
const reportDataStore = useReportDataStore()
const {moneyFormater,numberFormater} = useFormater()
const barChartRef = ref();
let barChart: EChartsType;
//累计用户数
const userTotal = computed(()=>reportDataStore.reportData.usersTotal)
//日同比
const userGrowthLastDay = computed(()=>reportDataStore.reportData.userGrowthLastDay)
//月同比
const userGrowthLastMonth = computed(()=>reportDataStore.reportData.userGrowthLastMonth)
//柱状图数据
const usersLastMonth = computed(()=>reportDataStore.reportData.usersLastMonth)
const getOption = () => {
  return {
    xAxis: {
      boundaryGap: false, // 左右两侧不留白
      show: false,
      min: 0,
      max:userTotal.value,
    },
    grid: {
      left: 0,
      right: 0,
    },
    yAxis: {
      show: false,
      data: ["AAA"],
    },
    tooltip: {},
    series: {
      type: "bar",
      // 设置柱条的宽度
      barWidth: 10,
      showBackground: true,
      itemStyle: {
        color: "orangered",
      },
      label: {
        show: true,
        formatter: "|",
        position: "right",
        color: "red",
      },
      // data: [66],
      data: [(userTotal.value as number) - (usersLastMonth.value as number)]
    },
  };
};
onMounted(() => {
  barChart = echarts.init(barChartRef.value);
  barChart && barChart.setOption(getOption());
});
watch(userTotal,()=>{
  barChart && barChart.setOption(getOption());
})
</script>
 
 <style scoped>
</style>